<!--
- Author:  LiShibin.
- Date:    2018/3/13 0013.
- File:    每月的统计信息(账户变动查询).
-->
<template>
  <div>
    <div class="bod_box">
      <!--<div class="suborbox f-cb"><span class="timedate">日期选择</span>-->
      <!--<div class="subornat" style="display: inline-block; float: none"><i class="iconfont icon-downdot"></i>-->
      <!--<span style="display: inline-block;width: 140px; height: 30px; vertical-align: middle; line-height: 20px; font-size: 15px;-webkit-appearance: none;border: none;background: #f5f5f5;padding: 5px 10px;" @click="openDatePicker">{{selectMonth || $utils.formatDate(new Date(), 'yyyy-MM')}}</span>-->
      <!--</div>-->
      <!--<div class="screenbox"></div>-->
      <!--</div>-->
      <div class="suborbox f-cb"><span class="timedate">日期选择</span>
        <div class="subornat" style="width: 220px;"><i class="iconfont icon-downdot"></i>
          <select v-model="batchSelectedId" style="width: 220px;" @change="getReport">
            <option :value="item.version" v-for="(item, index) in batchList">{{item.begin_time}} 至 {{item.end_time}}</option>
          </select>
        </div>
        <div class="screenbox"></div>
      </div>
    </div>
    <div class="sub_block">
      <div class="block f-cb">本月自己购买的订单金额：{{report.now_buy_sum}}</div>
      <div class="block f-cb">
        <span class="pt5 disib">本月自己购买的订单数：{{report.now_buy_count | toFixed(0)}}</span><a href="javascript: void(0)" @click="gotoMonthOrderList" class="look" v-show="report.now_buy_count > 0">查看订单</a>
      </div>
      <div class="block f-cb">上月有效人数：{{report.last_real_valid_childs}}</div>
      <div class="block f-cb">本月有效人数：{{report.now_real_valid_childs}}</div>
      <div class="block f-cb">本月补贴比例：<span>{{report.now_rate}}</span></div>
      <div class="block f-cb">次月补贴比例：<span class="cr_f83166">{{report.next_rate}}</span></div>
    </div>
    <footer-tab></footer-tab>
    <!--<datetime-picker-->
      <!--ref="datePicker"-->
      <!--v-model="currentDate"-->
      <!--type="date"-->
      <!--year-format="{value} 年"-->
      <!--month-format="{value} 月"-->
      <!--date-format="{value}日"-->
      <!--@confirm="handleDateChange">-->
    <!--</datetime-picker>-->
  </div>
</template>

<script>
  import DatetimePicker from '../../components/monthPicker'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: ['memberInfo']})
    ],
    data() {
      return {
        currentDate: new Date(),
        selectMonth: '',
        batchList: [],
        batchSelectedId: '',
        report: {}
      }
    },
    components: {
      'datetime-picker': DatetimePicker
    },
    created() {
      this.getReportBatchList()
    },
    methods: {
      getReportBatchList() {
        this.$request.getReportBatchList().then(data => {
          this.batchList = data
          let len = data.length
          if (len > 0) {
            this.batchSelectedId = data[len - 1].version
            this.getReport()
          }
        })
      },
      gotoMonthOrderList() {
        if (this.batchList.length <= 0) {
          return
        }
        let batchBeginDate = ''
        let batchEndDate = ''
        for (let i = 0; i < this.batchList.length; i++) {
          if (this.batchList[i].version == this.batchSelectedId) {
            batchBeginDate = this.batchList[i].begin_time
            batchEndDate = this.batchList[i].end_time
          }
        }
        this.$router.push({
          name: 'order-friend',
          query: {memberId: this.memberInfo.member_id, userLv: this.$dictionary.userLv.a, s_time: batchBeginDate, e_time: batchEndDate}
        })
      },
      openDatePicker() {
        this.$refs.datePicker.open()
      },
//      handleDateChange(value) {
//        let date = new Date(value)
//        let dateStr = this.$utils.formatDate(date, 'yyyy-MM')
//        this.selectMonth = dateStr
//        console.log(dateStr)
//        this.report = {}
//        this.getReport(dateStr)
//      },
      getReport() {
        this.$request.getReport(this.batchSelectedId).then(data => {
          this.report = data
        })
      }
    }
  }
</script>

<style>

</style>